<script setup lang="ts">
import { onMounted, computed, reactive } from 'vue';
import { navigateTo, getCurrentInstance, showLoading } from '@tarojs/taro';
import dayjs from 'dayjs';
import { APP_PLAN_TASK_DETAIL_QUERY } from '/@/api/modules/maintain/plan-task';
import APP_PLAN_TASK_LIST_MORE from '/@/assets/image/icon/app-plan-task-list-more.png';
const props = defineProps<{
  placeholder: string;
}>();

/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
};

/**
 * 任务计划列表中的一项
 */
const planTaskItem = reactive<{ item?: PlanTask.Dto }>({
  item: {
    id: '',
    handleStatus: 2,
    planName: '',
    taskCode: '',
    validTime: 0,
    invalidTime: 0,
    deviceHandledCount: 0,
    handleTime: 0,
    planBizType: 1,
    routeTips: '',
  },
});

const notice = reactive<{
  /**
   * 路线提示框可见性
   */
  routerTipVisible: boolean;
  /**
   * 提示框是否显示
   */
  isVisible: boolean;
  /**
   *筛选项
   */
  list: { name: string }[];
}>({
  routerTipVisible: false,
  isVisible: false,
  list: [{ name: '路线提示' }, { name: '转派任务' }],
});
/**
 *筛选项选择回调
 */
function noticeItemChoose(_: unknown, index: number) {
  switch (index) {
    case 0:
      notice.routerTipVisible = true;
      break;
    case 1:
      navigateTo({
        url: `/pages/inspection/forward/index?id=${planTaskItem.item?.id}`,
      });
      break;
  }
}

function displayNotice() {
  notice.isVisible = !notice.isVisible;
}

/**
 * 移动端计划详情
 */
function queryPlanTaskDetail() {
  showLoading();
  APP_PLAN_TASK_DETAIL_QUERY({ planTaskId: params.id }).then((res) => {
    planTaskItem.item = res.planTaskDto;
  });
}

onMounted(() => {
  queryPlanTaskDetail();
});

/**
 * 不同任务状态显示不同时间
 * 任务状态
 * 已完成: 完成时间
 * 未完成: 开始时间至结束时间
 */
const timeDesc = computed(() => {
  if (planTaskItem.item?.handleStatus == 2) {
    return `${dayjs(planTaskItem.item.validTime).format('YYYY-MM-DD HH:mm')} - ${dayjs(
      planTaskItem.item.invalidTime,
    ).format('YYYY-MM-DD HH:mm')}`;
  } else {
    return dayjs(planTaskItem.item?.handleTime).format('YYYY-MM-DD HH:mm');
  }
});
</script>
<template>
  <view class="plan-task-head-card">
    <view
      class="plan-task-head-card__information"
      :class="planTaskItem.item?.handleStatus === 2 ? 'process-background' : 'complete-background'"
    >
      <view class="plan-task-head-card__information__header">
        <text
          class="plan-task-head-card__information__header__status"
          :style="{ color: planTaskItem.item?.handleStatus === 2 ? '#6875ff' : '#5BAC5A' }"
          >{{ planTaskItem.item?.handleStatus === 2 ? '执行中' : '已完成' }}</text
        >
        <text class="plan-task-head-card__information__header__plan-name">{{
          planTaskItem.item?.planName || '_'
        }}</text>
        <image
          v-if="planTaskItem.item?.handleStatus === 2"
          id="noticeId"
          :src="APP_PLAN_TASK_LIST_MORE"
          class="plan-task-head-card__information__header__image"
          @click="displayNotice"
        />

        <nut-popover
          v-model:visible="notice.isVisible"
          :list="notice.list"
          location="bottom-end"
          targetId="noticeId"
          @choose="noticeItemChoose"
        />
      </view>
      <view>
        <text>任务编号:&nbsp;&nbsp;</text>
        <text>{{ planTaskItem.item?.taskCode || '_' }} </text></view
      >
      <view>
        <text
          >{{ planTaskItem.item?.handleStatus === 2 ? '执行时间' : '完成时间' }}:&nbsp;&nbsp;</text
        ><text>{{ timeDesc }}</text>
      </view>
      <view>
        <text>{{ props.placeholder }}:&nbsp;&nbsp;</text
        ><text>{{ planTaskItem.item?.deviceHandledCount }} </text></view
      >
    </view>
  </view>
  <nut-dialog
    no-cancel-btn
    title="路线提示"
    :content="planTaskItem.item?.routeTips ? planTaskItem.item?.routeTips : ''"
    v-model:visible="notice.routerTipVisible"
  />
</template>
<style lang="scss">
.plan-task-head-card {
  background-color: #fff;
  //处理中的背景图片
  .process-background {
    background: url('/@/assets/image/icon/app-plan-task-list-process-bg.png') no-repeat center /
      100% 100%;
  }
  //完成的背景图片
  .complete-background {
    background: url('/@/assets/image/icon/app-plan-task-list-complete-bg.png') no-repeat center /
      100% 100%;
  }
  &__information {
    color: #fff;
    font-size: 26px;
    padding: 20px;
    margin: 20px;
    border-radius: 6px;
    &__header {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      &__status {
        text-align: center;
        border-radius: 20px;
        background-color: #fff;
        color: #6875ff;
        font-size: 28px;
        width: 120px;
        margin-right: 24px;
      }
      &__plan-name {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        word-break: keep-all;
        text-overflow: ellipsis;
        font-size: 30px;
      }

      &__image {
        width: 7px;
        height: 32px;
        padding: 0 5px;
      }
    }
  }
}
</style>
